<!DOCTYPE html>
<html>
<head>
	<title>小鹿线</title>
	<meta charset="UTF-8"/>
	<link rel="stylesheet" href="css/swiper-bundle.min.css">
	<link rel="stylesheet" href="css/animate.css">
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="header">
	<div class="nav">
		<div class="wrap u-clearfix">
			<h1 class='u-l'><img src="images/pic_logo.png"></h1>
			<ul class='u-r u-clearfix'>
				<li class='active'><a href="index.html">首 页</a></li>
				<li><a href="">学习路线</a></li>
				<li><a href="curriculum.html">在线课程</a></li>
				<li><a href="product.html">产品中心</a></li>
				<li><a href="student.html">成功就业</a></li>
				<li><a href="about.html">关于我们</a></li>
			</ul>
		</div>
	</div>
	
	<!--swiper部分-->
	<div class="swiper-container">
	    <div class="swiper-wrapper banner" id='swiperWrapper'>
	        
	    </div>
	</div>
	
	<div class="header-card">
		<div class='card-content u-clearfix'>
			<h2 class='u-l'>WEB前端全栈系列</h2>
			<ul class='u-r u-clearfix'>
				<li><img src="images/wx.jpg"></li>
				<li><img src="images/uni.jpg"></li>
			</ul>
		</div>
	</div>
	<div class='mask'></div>
</div>

<div class='container'>
	<!-- 开班计划 -->
	<div class='plan'>
		<div class='content-wrap u-clearfix'>
			<div class="plan-left u-l">
				<div class='plan-card'>
					<h3>开班计划</h3>
					<p>五大前端课程，跟随企业需求不断提升技能</p>
				</div>
				<div class='line'>
					<span>课程详情</span>
				</div>
			</div>
			<div class="plan-right u-r">
				<ul class='plan-list u-clearfix' id='planList'>
					
				</ul>
				<ul class='course-list'>
					<li class="u-clearfix">
						<div class="course-left u-l">
							<div class='course-title'>
								<h3>WEB前端零基础到就业</h3>
								<p>小鹿线web前端就业班，课程内容紧跟互联网技术发展与企业实际用人需求，不断升级更新。 学员可以深入接触从需求分析到前端开发再到上线部署的全栈解决方案，学习前端开发、移动端开发、混合开发、微信小程序等多端开发。</p>
							</div>
							<div class="course-stage">
								<p>web前端就业班</p>
							</div>
						</div>
						<div class="course-right u-r">
							<img src="images/quan.jpg">
							<a href=""></a>
						</div>
					</li>
					<li class="u-clearfix">
						<div class="course-left u-l">
							<div class='course-title'>
								<h3>WEB前端100%就业</h3>
								<p>小鹿线开设就业班，为广大学员解决前端就业问题，高度接轨企业用人需求，并且配备了雄厚的师资团队和就业服务团队，致力于让学员100%就业。</p>
							</div>
							<div class="course-stage">
								<p>就业指导</p>
							</div>
						</div>
						<div class="course-right u-r">
							<img src="images/start.jpg">
							<a href=""></a>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<!-- 企业项目 -->
	<div class='plan'>
		<div class='content-wrap u-clearfix'>
			<div class="plan-left u-l">
				<div class='plan-card'>
					<h3>企业项目</h3>
					<p>五大前端课程，跟随企业需求不断提升技能</p>
				</div>
				<div class='line'>
					<span>课程详情</span>
				</div>
			</div>
			<div class="plan-right u-r">
				<ul class='plan-list u-clearfix' id='planPage1'>
					
				</ul>
				<div class='plan-line'></div>
				<ul class='plan-list u-clearfix' id='planPage2'>
					
				</ul>
			</div>
		</div>
	</div>
	<div class='footer'>
		<div class='footer-wrap'>
			<div class='u-l footer-logo'>
				<img src="images/pic_logo.png">
			</div>
			<div class='footer-txt'>
				<ul class="u-clearfix">
					<li><a href="mailto:TS@xuexiluxian.com">商务合作</a></li>
					<li><a href="mailto:TS@xuexiluxian.com">意见反馈</a></li>
					<li><a href="about.html">关于我们</a></li>
					<li><a href="javascript:;">联系我们</a></li>
					<li><a href="javascript:;" id='copyright'>版权声明</a></li>
				</ul>
				<p>© 2020, 小鹿线保留所有权利. 京ICP备18061704号-3</p>
			</div>
			<div class='u-r'>
				<ul class="qr-code u-clearfix">
					<li>
						<p>微信公众号</p>
						<div><img src="images/xuexi.jpg"></div>
					</li>
					<li>
						<p>微信公众号</p>
						<div><img src="images/jiuye.jpg"></div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>

<!--弹出层HTML结构-->
<div id="myModal" class="myModal">
  <!-- Modal Content Here -->
  <h3>版权声明</h3>
  <p>© 2020, 小鹿线保留所有权利. 京ICP备18061704号-3</p>
  <!-- Custom Close Button -->
  <b class="myModal-close js-popup-close">x</b>
</div>

<script src='js/swiper-bundle.min.js'></script>
<script src='js/jquery-1.11.min.js'></script>
<!--jquery弹出层插件-->
<script src='js/jquery.popup.min.js'></script>
<script>
$(function(){

	var sBanner='',
		sPlanList='',
		sPlanPage1='',
		sPlanPage2='';
	
	//请求banner的数据
	$.ajax({
		url:'http://39.101.217.150:8075/banner/list',
		type:'POST',
		success:function(data){
			var datas = data.data;
			$.each(datas,function(index,item){
				sBanner += `<div class="swiper-slide">
					<img src="${item.url}">
				</div>`
			})
			$('#swiperWrapper').append(sBanner);
			//swiper代码
			var mySwiper = new Swiper ('.swiper-container', {
				loop: true, // 循环模式选项
				effect : 'cube',//切换效果
			});
		}
	})
	
	//请求开班计划数据
	$.ajax({
		url:'http://39.101.217.150:8075/classplan/list',
		data:{
			page:1,
			size:3
		},
		success:function(data){
			var records = data.data.records;
			$.each(records,function(index,item){
				sPlanList+=`<li>
					<div><img src="${item.imgurl}"></div>
					<h3>${item.name}</h3>
					<p class='crowd'>${item.mainName}</p>
					<p class='time'>开班时间：${item.classTime}</p>
					<div class='consultation'><a href="javascript:;">立即抢座</a></div>
				</li>`;
			})
			$('#planList').append(sPlanList);
		}
	})
	
	//请求企业项目 page1
	$.ajax({
		url:'http://39.101.217.150:8075/apps/list',
		data:{
			page:1,
			size:3
		},
		success:function(data){
			var records = data.data.records
			$.each(records,function(index,item){
				sPlanPage1+=`<li>
					<a href='${item.appurl}' target='_blank'>
						<div><img src="${item.imgurl}"></div>
						<h3>${item.appName}</h3>
						<div class='plan-original'>
							<span class='original'>原创</span>
							<i class='icon i0'></i>
							<span>${item.appTime}</span>
						</div>
					</a>	
				</li>`;
			})
			$('#planPage1').append(sPlanPage1);
		}
	})
	
	//请求企业项目 page2
	$.ajax({
		url:'http://39.101.217.150:8075/apps/list',
		data:{
			page:2,
			size:3
		},
		success:function(data){
			var records = data.data.records
			$.each(records,function(index,item){
				sPlanPage2+=`<li>
					<a href='${item.appurl}' target='_blank'>
						<div><img src="${item.imgurl}"></div>
						<h3>${item.appName}</h3>
						<div class='plan-original'>
							<span class='original'>原创</span>
							<i class='icon i0'></i>
							<span>${item.appTime}</span>
						</div>
					</a>	
				</li>`;
			})
			$('#planPage2').append(sPlanPage2);
		}
	})
	
	//点击版权声明弹出，弹出层
	$("#copyright").click(function(){
		$('#myModal').popup();
	})
	
})

</script>


</body>
</html>